import React, { Component } from "react";

// 所谓的表单的绑定，就相当于是vue的v-model
// 用过就是让我们可以拿到input里面输进去的内容

// 受控组件和非受控组件
// 受控组件：当表单控件添加了value属性和onChange事件，那么就是受控组件，让我们自己来控制的组件

// 平时写代码的时候，官方是推荐使用受控组件
// 除非是用到了file的文件上传框，那么就只能使用非受控组件

class App extends Component {
  state = {
    textValue: "123",
  };

  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({
      textValue: e.target.value,
    });
  };

  render() {
    return (
      <>
        <h2>表单绑定-受控组件</h2>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
        />
        <div>{this.state.textValue}</div>
      </>
    );
  }
}

export default App;
